<template>
  <div class="content">
    <div class="pageSearchView">
      <SearchForm v-model="searchParam" :fields="searchFields" :handleSearch="handleSearch" />
    </div>
    <div class="pageTableView">
      <div class="pageTableMenuView">
        <div class="pageTableTitle">列表信息 <el-icon><house-icon /></el-icon>
        </div>
        <div class="pageTableButView">
          <el-button :icon="Plus" @click="handleAdd">新建</el-button>
          <!-- 添加列按钮 -->
          <el-button :icon="Plus" @click="showAddColumnDialog = true" type="primary">表头列配置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table class="pageTableClass" :data="paginatedData" height="calc(100vh - 350px)" :loading="isLoading">
        <el-table-column label="序号" align="center" width="80">
          <template #default="scope"> {{ (paginationParams.current - 1) * paginationParams.pageSize + scope.$index + 1
            }} </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" align="center" />
        <el-table-column prop="productCode" label="产品编码" align="center" />
        <el-table-column prop="materialNo" label="成品物料" align="center" />
        <el-table-column prop="category" label="产品类别" align="center" />
        <!-- 动态列渲染 -->
        <el-table-column v-for="col in columns" :key="col.tableKey" :prop="col.tableKey" :label="col.tableChineseKey"
          align="center" />
        <el-table-column label="操作" align="center" fixed="right" width="180">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" size="small" plain text :icon="Edit">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="danger" size="small" plain text :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagePagination">
        <el-pagination background v-model:current-page="paginationParams.current"
          v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next" :total="pageTotal"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 弹窗表单 -->
    <el-dialog v-model="showCrud" :title="crudTitle" width=500>
      <el-form :model="formData" label-width="130px" ref="ruleFormRef" :rules="rules">
        <el-row>
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="formData.productName" placeholder="请输入产品名称" style="width: 300px"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="产品编码" prop="productCode">
            <el-input v-model="formData.productCode" placeholder="请输入产品编码" style="width: 300px"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="成品物料" prop="materialId">
            <el-select v-model="formData.materialId" placeholder="请选择成品物料" filterable style="width: 300px">
              <el-option v-for="item in materialList" :key="item.id" :label="item.materialName"
                :value="item.id"></el-option>
            </el-select> </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="产品类别" prop="category">
            <el-input v-model="formData.category" placeholder="请输入产品类别" style="width: 300px"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <!-- 动态字段在弹窗中渲染 -->
          <el-form-item v-for="col in columns" :key="col.tableKey" :label="col.tableChineseKey" :prop="col.tableKey">
            <el-input v-model="formData[col.tableKey]" :placeholder="`请输入${col.tableChineseKey}`"
              style="width: 300px" />
          </el-form-item>
        </el-row>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="showCrud = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 动态添加列的对话框 -->
    <el-dialog v-model="showAddColumnDialog" title="管理列信息">
      <!-- 表格增删改查 -->
      <el-button :icon="Plus" @click="showAddColumnDialog2 = true; columnDialogTitle = '新建'" type="primary"
        style="margin-bottom: 20px;">新建列</el-button>
      <el-table :data="columns">
        <el-table-column prop="tableChineseKey" label="列名称" align="center" />
        <el-table-column prop="tableKey" label="列编码" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button @click="editColumn(scope.row, scope.$index)" size="small" icon="Edit">编辑</el-button>
            <el-button @click="deleteColumn(scope.row, scope.$index)" size="small" type="danger"
              icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="showAddColumnDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 动态添加列的对话框 -->
    <el-dialog v-model="showAddColumnDialog2" :title="columnDialogTitle">
      <el-form>
        <el-form-item label="列名称">
          <el-input v-model="newColumn.tableChineseKey" placeholder="请输入列名称" />
        </el-form-item>
        <el-form-item label="列Key">
          <el-input v-model="newColumn.tableKey" placeholder="请输入列Key" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddColumnDialog2 = false">取消</el-button>
        <el-button type="primary" @click="addColumn">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import SearchForm from '@/components/SearchForm.vue';
import { useproductData } from '@/hooks/baseData/product';
import axiosInstance from '@/utils/http/api';
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus'; // 假设使用 Element Plus
import { computed, ref } from 'vue';

const {
  searchParam,
  paginationParams,
  pageTotal,
  paginatedData,
  searchFields,
  handleSearch,
  handleSizeChange,
  handleCurrentChange,
  addproduct,
  deleteproduct,
  isLoading,
  ruleFormRef,
  rules,
  formData,
  materialList
} = useproductData();


const getMaterialName = (id: number) => {
  const material = materialList.value.find((item: any) => item.id === id);
  return material ? material.materialName : '';
};
const typeList = ref([
  { label: "采购入库", value: "0" },
  { label: "自制入库", value: "1" },
  { label: "其他", value: "2" },
]);
const isEdit = ref(false);
const showCrud = ref(false);
const crudTitle = computed(() => {
  return isEdit.value ? '编辑' : '新建';
});
onMounted(() => {
  getColumnsList()
})
// 动态列和新列的数据
const columns = ref([
  { tableChineseKey: '自定义列1', tableKey: 'tableKey', visible: true },
  { tableChineseKey: '自定义列2', tableKey: 'tableKey', visible: true },
  // 可添加更多默认列
]);
const showAddColumnDialog = ref(false);
const showAddColumnDialog2 = ref(false);
const columnDialogTitle = ref("")
const columnIndexNumber = ref(0)

const newColumn = ref({
  tableChineseKey: '',
  tableKey: '',
  visible: true,
  id: ""
});
// 查询列
const getColumnsList = () => {
  axiosInstance.post("/api/dynamicTableExtension/getPage",
    { page: 1, pageSize: 999, tableName: "product" }
  ).then(res => {
    const { data, code, message } = res
    if (code === 200) {
      console.log(data);
      columns.value = data.records
    }
  })
}
// 新建列
const addColumn = () => {
  console.log("编辑");

  if (newColumn.value.tableKey && newColumn.value.tableChineseKey) {

    if (columnDialogTitle.value === "新建") {
      axiosInstance.post('/api/dynamicTableExtension/save', {
        "frontendType": "INPUT",
        "tableName": "product",
        "tableKey": newColumn.value.tableKey,
        "tableChineseKey": newColumn.value.tableChineseKey
      }).then(res => {
        if (res.code === 200) {
          ElMessage.success("新建列成功");
          getColumnsList()
          // columns.value.push({ ...newColumn.value });
          newColumn.value = { tableKey: '', tableChineseKey: '', visible: true };
          showAddColumnDialog2.value = false
        }
      })

    }
    else {
      console.log("编辑");
      axiosInstance.put('/api/dynamicTableExtension/update', {
        "frontendType": "INPUT",
        "tableName": "product",
        "tableKey": newColumn.value.tableKey,
        "tableChineseKey": newColumn.value.tableChineseKey,
        "id": newColumn.value.id

      }).then(res => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          getColumnsList()
          showAddColumnDialog2.value = false

        }
      })

    }

  }
};

// 编辑列
const editColumn = (row: any, index: number) => {
  console.log(row);
  columnIndexNumber.value = index
  columnDialogTitle.value = "编辑"
  showAddColumnDialog2.value = true
  newColumn.value.tableChineseKey = row.tableChineseKey
  newColumn.value.tableKey = row.tableKey
  newColumn.value.id = row.id

};

// 删除列
const deleteColumn = (row: any, index: number) => {
  axiosInstance.delete("/api/dynamicTableExtension/delete", {
    data: {
      ids: [row.id]
    }
  }).then(res => {
    if (res.code === 200) {
      getColumnsList()
      ElMessage.success("修改成功");

    }
  })
  // columns.value.splice(index, 1);
};

// 新建记录
const handleAdd = () => {
  isEdit.value = false;
  console.log(formData.value, ' formData.value')
  formData.value = {};
  showCrud.value = true;
};

// 编辑记录
const handleEdit = (row: any) => {
  isEdit.value = true;
  formData.value = { ...row };
  console.log(formData.value, row, 'formData.value ')
  showCrud.value = true;
};

// 删除记录
const handleDel = (row: any) => {
  ElMessageBox.confirm('确定删除该条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteproduct(row.id);
  }).catch(() => {
  });
};


// 保存记录
const handleSave = async () => {
  const formDataObject = columns.value.reduce((acc, col) => {
    acc[col.tableKey] = formData.value[col.tableKey];
    return acc;
  }, {});
  console.log(formDataObject);
  formData.value.extension = formDataObject
  await addproduct(formData.value, (() => {
    showCrud.value = false;
  }));
};


</script>
<style scoped></style>
